<template>
  <scroll-view
    class="accordion-container"
    :scroll-y="true"
    @scroll="onScroll"
	@scroll-top	="scrollTop"
    style="height: 100%;">
    
    <view
      v-for="(section, index) in sections"
      :key="index"
      :class="['accordion-item', `accordion-item-${index}`]" 
      class="accordion-item">
      <!-- 手风琴标题部分 -->
      <view class="accordion-header" @click="toggleSection(index)">
        {{ section.title }}
      </view>

      <!-- 展开内容区域，虚拟列表 -->
      <view v-show="activeIndex === index" class="accordion-content">
        <view
          class="list"
          :style="{ height: section.totalHeight + 'px' }">
          
          <view
            v-for="item in section.visibleData"
            :key="item.id"
            :style="{ transform: 'translateY(' + item.translateY + 'px)' }"
            class="list-item">
            {{ item.text }}
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: null, // 当前展开的手风琴项索引
      sections: [
        {
          title: 'Section 1',
          data: Array.from({ length: 1000 }, (_, i) => ({ id: i, text: `Item ${i + 1}` })), // 模拟数据
          itemHeight: 50, // 每个列表项的高度（px）
          buffer: 20, // 缓冲区
          visibleData: [], // 当前可视的列表项
          totalHeight: 0, // 列表的总高度
          startIndex: 0, // 当前可视区域的起始索引
          endIndex: 0, // 当前可视区域的结束索引
          scrollTop: 0, // 当前组的滚动位置
          viewportHeight: 0, // 当前组的视口高度
        },
        {
          title: 'Section 2',
          data: Array.from({ length: 500 }, (_, i) => ({ id: i, text: `Item ${i + 1}` })), // 模拟数据
          itemHeight: 50, // 每个列表项的高度（px）
          buffer: 20, // 缓冲区
          visibleData: [], // 当前可视的列表项
          totalHeight: 0, // 列表的总高度
          startIndex: 0, // 当前可视区域的起始索引
          endIndex: 0, // 当前可视区域的结束索引
          scrollTop: 0, // 当前组的滚动位置
          viewportHeight: 0, // 当前组的视口高度
        }
      ],
      globalScrollTop: 0, // 外层 scroll-view 的滚动位置
	  scrollTop:0,
    };
  },
  methods: {
    toggleSection(index) {
      if (this.activeIndex === index) {
        this.activeIndex = null;
      } else {
        this.activeIndex = index;
		this.scrollTop = this.globalScrollTop
		this.$nextTick(() =>{
			this.scrollTop = 0
		});
        this.updateVisibleData(index);
      }
    },
    onScroll(e) {
      this.globalScrollTop = e.detail.scrollTop;
      if (this.activeIndex !== null) {
        this.updateVisibleData(this.activeIndex);
      }
    },
    updateVisibleData(index) {
      if (index === null) return;
      const section = this.sections[index];
      const { itemHeight, buffer, data } = section;
    
      // 获取当前手风琴项的滚动高度
      const sectionScrollTop = this.globalScrollTop - section.scrollTop;
    
      // 计算可视区域的索引
      const startIndex = Math.floor(sectionScrollTop / itemHeight) - buffer;
      const endIndex = Math.ceil((sectionScrollTop + section.viewportHeight) / itemHeight) + buffer;
    
      // 限制索引范围，防止越界
      section.startIndex = Math.max(0, startIndex);
      section.endIndex = Math.min(data.length, endIndex);
    
      // 更新可见数据并计算 translateY
      section.visibleData = data.slice(section.startIndex, section.endIndex).map((item, i) => ({
        ...item,
        translateY: (section.startIndex + i) * itemHeight,
      }));
	  
	  
    
      // 更新总高度
      section.totalHeight = data.length * itemHeight;
    
      // 调试输出
      console.log(`startIndex: ${section.startIndex}, endIndex: ${section.endIndex}, totalHeight: ${section.totalHeight}`);
    },
    getViewportHeight(index) {
      // 获取每个手风琴项的视口高度
      uni.createSelectorQuery()
        .select(`.accordion-item-${index}`)
        .boundingClientRect(rect => {
          this.sections[index].viewportHeight = rect.height;
          this.updateVisibleData(index);
        })
        .exec();
    }
  },
  mounted() {
    // 初始化每个手风琴组的 totalHeight 和 viewportHeight
    this.sections.forEach((section, index) => {
      section.totalHeight = section.data.length * section.itemHeight;
      this.getViewportHeight(index);
    });
  }
};
</script>

<style>
.accordion-container {
  width: 100%;
}
.accordion-item {
  border-bottom: 1px solid #000;
}
.accordion-header {
  padding: 16px;
  background-color: #000;
  cursor: pointer;
  height: 50px;
  line-height: 50px;
}
.accordion-content {
  position: relative;
  overflow: hidden;
}
.list {
  position: relative;
}
.list-item {
  position: absolute;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 16px;
}
</style>
